<template>
  <div>
    <div class="header">
      <div>
        <i class="svg-icon icon-back" @click="back"></i>
        <h2>我的快递地址</h2>
      </div>
    </div>
    <div class="msg">
      <div class="item">
        <span>收货人:</span>
        <input v-model="newAddress.username" type="text" />
      </div>
      <div class="item">
        <span>联系电话:</span>
        <input v-model="newAddress.phone" type="text" />
      </div>
      <div class="item">
        <span>所在地区:</span>
        <div class="editbox">
          <select name="" id="" v-model="lv1" @click="handleSelect(1)">
            <option value="-1">请选择省份</option>
            <option
              :value="index"
              v-for="(item, index) in province"
              :key="index"
            >
              {{ item.Name }}
            </option>
          </select>
          <select name="" id="" v-model="lv2" @click="handleSelect(2)">
            <option value="-1">请选择城市</option>
            <option :value="index" v-for="(item, index) in city" :key="index">
              {{ item.Name }}
            </option>
          </select>
          <select name="" id="" v-model="lv3">
            <option value="-1">请选择区县</option>
            <option :value="index" v-for="(item, index) in region" :key="index">
              {{ item.Name }}
            </option>
          </select>
        </div>
      </div>
      <div class="item">
        <span>详细地址:</span>
        <input v-model="newAddress.detail" type="text" />
      </div>
    </div>
    <div
      @click="handleSave"
      class="save"
      :class="{ 'disabled-btn': !btnState }"
    >
        <a href="javascript:void(0);" @click="change">
          <button>保存</button>
        </a>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {mapState} from 'vuex'
export default {
  data() {
    return {
      province: [],
      lv1: -1,
      lv2: -1,
      lv3: -1,
      addressIndex:-1,
      // indx:-1,//-1表示为新增，其他为下标
      newAddress: {
        username: "",
        phone: "",
        detail: "",
        isDefault: false,

      },
    };
  },
  computed: {
    city() {
      let { province, lv1 } = this;
      // 根据所选省份得到所选城市
      // 判断后把数据包中的City返回给city()
      return lv1 == -1 ? [] : province[lv1].City;
    },
    region() {
      let { city, lv2 } = this;
      return lv2 == -1 ? [] : city[lv2].Region;
    },
    btnState() {
      // 提交按钮的状态
      let { username, phone, detail } = this.newAddress;
      let { lv1, lv2 } = this;
      let bool = true;
      if (
        lv1 == -1 ||
        lv2 == -1 ||
        username == "" ||
        phone == "" ||
        detail == ""
      ) {
        bool = false;
      }
      return bool;
    },
    // 获取state里面的addressList赋给computed里的addressList
    ...mapState({
      addressList:state=>state.address.addressList, //addressList属性里的来自address.js里面的state的addressList
    }),
  },
  
   created() {
    // 获取三级菜单的数据
    axios.get("http://localhost:3000/city").then((res) => {
      //   console.log(res)
      this.province = res.data;
      // console.log(this.addressList) 
      // console.log(this.$route.query.idx)
      this.addressIndex=this.$route.query.idx
      let indx = parseInt(this.$route.query.idx)
      if(!(indx == -1)){
        let {addressList}=this
        this.newAddress={...addressList[indx]}
        this.lv1 = addressList[indx].loc[0].idx;
        this.lv2 = addressList[indx].loc[1].idx;
        this.lv3 = addressList[indx].loc[2].idx;
      }
    })
  },
  methods: {
    back(){
      history.back()
    },
    handleSelect(num) {
      if (num == 1) {
        // 表示省级下拉菜单发生了变化,初始化城市和区县菜单
        this.lv2 = -1;
        this.lv3 = -1;
        return; //表示结束
      }
      // 表示n=2时
      this.lv3 = -1;
    },
    handleSave() {
      let { newAddress, lv1, lv2, lv3, province, city, region } = this;
      newAddress.loc = [
        { name: province[lv1].Name, idx: lv1 },
        { name: city[lv2].Name, idx: lv2 },
        { name: lv3 == -1 ? "" : region[lv3].Name, idx: lv3 },
      ];
      // console.log(newAddress);
      // let indx=this.addressIndex
      // console.log(this.addressIndex)
      this.$store.commit("address/addressUpdateMut", {
        obj: newAddress,
        idx: this.addressIndex, //父子通讯的值为-1则为添加
      });
    },
    change() {
      history.back();
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
  position: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px;
  color: #000;
  box-sizing: border-box;
  z-index: 99;
  border-bottom: 1px solid #ccc;
  background: #fff;
  text-align: center;
  line-height: 34px;

  h2 {
    font-size: 16px;
    font-weight: 700;
  }
  .svg-icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
  }

  .icon-back {
    position: absolute;
    top: 5px;
    left: 10px;
    background-image: url();
  }
}
.msg {
  width: 100%;
  height: 321px;
  background: #fff;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .item {
    width: 94%;
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 15px;
    span {
      font-size: 16px;
      display: block;
      margin-bottom: 8px;
      color: #999;
      margin-top: 5px;
    }
    input {
      width: 95%;
      height: 34px;
      line-height: 34px;
      color: #333;
      border: 1px solid #ccc;
      border-radius: 3px;
      font-size: 14px;
    }
    select {
      font-size: 14px;
      width: 31%;
      height: 30px;
      margin-left: 4px;
      background: #fff;
      color: #333;
      border: 1px solid #ccc;
      option {
        font-size: 14px;
      }
    }
  }
}
.save {
  margin-top: 2px;
  background: #fff;
  button {
    background-color: #179de1;
    border: 1px solid #179de1;
    width: 96%;
    margin: 6px 2%;
    height: 32px;
    color: #fff;
    font-size: 16px;
  }
}
.disabled-btn {
  opacity: 0.4;
}
.disabled-btn,
.disabled-btn a {
  cursor: not-allowed;
  -webkit-transition: none;
  transition: none;
  pointer-events: none;
}
</style>